<template>
    <component :is="tag" :label="label" label-position="left">
        <el-button type="primary" plain @click="open" v-bind="$attrs">
            编写代码
        </el-button>
    </component>
</template>
<script setup lang="tsx">
import {computed} from 'vue'
import {showMsg} from '@dashboard/utils'
import {ElButton,ElTag} from 'element-plus'
import * as monaco from 'monaco-editor-core'
// import monaco from './monaco.vue'
const value = defineModel<string>()
const {label} = defineProps<{
    label:string
}>()
defineOptions({inheritAttrs: false})
//当前标签为空时，不显示标签。因为el-form-item为空时会有bug
const tag = computed(()=>label?'el-form-item':'div')
const open = ()=>{
    let edit;
    let close = showMsg({
        title:'代码编辑器',
        // component:monaco,
        component:{
            data(){
                return {
                    editor:null
                }
            },
            render(){
                return (
                    <div style="width:100%;height:100%;">
                        <div style="height:40px;width:100%;padding: 8px 15px;box-sizing: border-box;display: grid;grid-template-columns: 30% 70%;">
                            <div style="height:100%;">
                                <ElTag type="success" size="small">javascript</ElTag>
                            </div>
                            <div style="height:100%;display:flex;justify-content: flex-end;">
                                <ElButton type="primary" size="small" style="height:100%;" onClick={this.close}>保存</ElButton>
                            </div>
                        </div>
                        <div ref="containerRef" class="editor" style="height: calc(100% - 40px);" />
                    </div>
                )
            },
            mounted(){
                const editorInstance = monaco.editor.create(this.$refs.containerRef,{
                    value:value.value,
                    language:'javascript',
                    theme:'vs-dark',
                    // minimap:{
                    //     enabled:false
                    // }
                })
                // monaco.languages.javascript.javascriptDefaults.setDiagnosticsOptions({
                //     noSemanticValidation: false, // 启用语义错误检查
                //     noSyntaxValidation: false    // 启用语法错误检查
                // });
                edit = editorInstance
            },
            methods:{
                close(){
                    value.value = edit.getValue()
                    close()
                }
            }
        }
    })
    
}
</script>
<style scoped>
.el-form-item>:deep(.el-form-item__content){
    justify-content: center;
}
</style>